<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>浮动布局</title>

    <style>
      .one {
        float: left;
        background-color: hotpink;
        width: 200px;
        height: 400px;
      }

      .two {
        float: right;
        background-color: red;
        width: 200px;
        height: 400px;
      }

      .three {
        background-color: lawngreen;
        /* width: 200px; */
        height: 400px;
      }
    </style>
  </head>
  <body>
    <!-- 
      浮动布局实现三列布局思路：
      A、B、C三个div块级元素，A元素设置width和height，左浮动；B元素设置width和height，右浮动； 
      C元素自动跑到A和B的中间，自适应
    -->
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    <script></script>
  </body>
</html>
